<template>
  <a-card :bordered="false">

    <!-- 操作按钮区域 -->
    <!--    <div class="table-operator" :md="24" :sm="24" style="margin: 0px 0px 20px 0px">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>

          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="batchDel">
                <a-icon type="delete"/>删除
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </div>-->

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :scroll="{ x: 2160 }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">详情</a>

<!--          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>-->
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <OmsElemeGoodsItem-modal ref="modalForm" @ok="modalFormOk"/>
  </a-card>
</template>

<script>
import OmsElemeGoodsItemModal from './modules/OmsElemeGoodsItemModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'

export default {
  name: 'OmsElemeGoodsItemList',
  mixins: [JeecgListMixin],
  components: {
    OmsElemeGoodsItemModal
  },
  data() {
    return {
      description: '信息',
      // 表头
      columns: [
        {
          title: '商品费用',
          align: 'center',
          dataIndex: 'productAmount'
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'productName'
        },
        {
          title: '商品ID',
          align: 'center',
          dataIndex: 'skuId'
        },
        {
          title: '新商品ID',
          align: 'center',
          dataIndex: 'vfoodId'
        },
        {
          title: '商品自定义ID',
          align: 'center',
          dataIndex: 'customProductId'
        },
        {
          title: '商品条形码',
          align: 'center',
          dataIndex: 'barCode'
        },
        {
          title: '优惠前单价',
          align: 'center',
          dataIndex: 'beforePreferentialPrice'
        },
        {
          title: '优惠后单价',
          align: 'center',
          dataIndex: 'afterPreferentialPrice'
        },
        {
          title: '优惠价购买数量',
          align: 'center',
          dataIndex: 'preferentialQty'
        },
        {
          title: '购买数量',
          align: 'center',
          dataIndex: 'qty'
        },
        {
          title: '配送费',
          align: 'center',
          dataIndex: 'deliverFee'
        },
        {
          title: '免配送费',
          align: 'center',
          dataIndex: 'zeroDeliveryFee'
        },
        {
          title: '包装费',
          align: 'center',
          dataIndex: 'packageFee'
        },
        {
          title: '商家活动补贴',
          align: 'center',
          dataIndex: 'shopPart'
        },
        {
          title: '是否参加满赠活动',
          align: 'center',
          dataIndex: 'attendGift'
        },
        {
          title: '商家券补贴',
          align: 'center',
          dataIndex: 'shopCouponAmount'
        },
        {
          title: '商家红包补贴',
          align: 'center',
          dataIndex: 'shopRedbagAmount'
        },
        {
          title: '商家配送费补贴',
          align: 'center',
          dataIndex: 'shopDeliveryAmount'
        },
        {
          title: '商家礼金补贴',
          align: 'center',
          dataIndex: 'shopCashAmount'
        },
        {
          title: '非商家活动补贴',
          align: 'center',
          dataIndex: 'elemePart'
        },
        {
          title: '非商家券补贴',
          align: 'center',
          dataIndex: 'elemeCouponAmount'
        },
        {
          title: '非商家红包补贴',
          align: 'center',
          dataIndex: 'elemeRedbagAmount'
        },
        {
          title: '非商家配送费补贴',
          align: 'center',
          dataIndex: 'elemeDeliveryAmount'
        },
        {
          title: '非商家礼金补贴',
          align: 'center',
          dataIndex: 'elemeCashAmount'
        },
        {
          title: '顾客买券补贴',
          align: 'center',
          dataIndex: 'allowanceServiceFee'
        },
        {
          title: '其他',
          align: 'center',
          dataIndex: 'other'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          width: 130,
          scopedSlots: { customRender: 'action' }
        }],
      url: {
        list: '/oms/omsElemeRetailOrder/listOmsElemeGoodsItemByMainId',
        delete: '/oms/omsElemeRetailOrder/deleteOmsElemeGoodsItem',
        deleteBatch: '/oms/omsElemeRetailOrder/deleteBatchOmsElemeGoodsItem'
      }
    }
  },
  methods: {
    loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()
      getAction(this.url.list, {
        orderId: params.mainId
        , pageNo: this.ipagination.current, pageSize: this.ipagination.pageSize
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        } else {
          this.dataSource = null
        }
      })
    },
    getMain(mainId) {
      this.queryParam.mainId = mainId
      this.loadData(1)
    },
    handleAdd: function() {
      this.$refs.modalForm.add(this.queryParam.mainId)
      this.$refs.modalForm.title = '添加饿了么订单明细表'
    }
  }
}
</script>
<style scoped>
.ant-card {
  margin-left: -30px;
  margin-right: -30px;
}
</style>
